<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文都云协同</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        html,
        body {
            height: 100%;
        }

        .my-container {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .my-login {
            border: 1px solid rgba(0, 0, 0, 0.05);
            width: 800px;
            padding: 30px 150px 60px;
            border-radius: 10px;
            box-shadow: 0px 0px 45px 10px rgba(0, 0, 0, 0.05);
        }

        .login-title {
            color: #666666;
            padding: 30px 0px 50px;
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>

<body>

    <div id="app" class="my-container">
        <div class="my-login">

            <div class="login-title">
                文都云协同
            </div>

            <div class="form-floating mb-3">
                <input v-model="loginUser.u_id" type="text" class="form-control" id="floatingInput" placeholder="请输入账号">
                <label for="floatingInput">账号</label>
            </div>
            <div class="form-floating mb-5">
                <input v-model="loginUser.u_pwd" type="password" class="form-control" id="floatingPassword"
                    placeholder="Password">
                <label for="floatingPassword">密码</label>
            </div>
            <div>
                <button @click="login" class="btn btn-primary" style="width:100%;height:60px;">登录</button>
            </div>
        </div>

    </div>

    <script src="layer/jquery-3.6.0.min.js"></script>
    <script src="layer/layer.js"></script>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/wendu.js"></script>


    <script>
        const app = {
            setup() {

                const loginUser = Vue.reactive({
                    "u_id": "",
                    "u_pwd": ""
                });

                const login = () => {

                    req(ajax.post('/security/login', loginUser), (result) => {
                        //获取令牌
                        const token = result.data;

                        //将令牌存放本地存储（localStorage）中 
                        localStorage.setItem("WD-TOKEN", token);

                        layer.msg("登录成功！", { icon: 1 }, () => {
                            //向主页面跳转
                            location.href = './security/home/home.html';
                        });
                    });

                    // //promise对象是js中定义的一个对象，其含义为承诺，即若正确响应必执行then函数中的行为，否则必执行catch函数中的行为
                    // const promise = ajax.post('/security/login', loginUser);
                    // promise.then(response => {//正常响应
                    //         const result = response.data;

                    //         if (result.success) {
                    //             //登录成功

                    //             //获取令牌
                    //             const token = result.data;

                    //             //将令牌存放本地存储（localStorage）中 
                    //             localStorage.setItem("WD-TOKEN",token);

                    //             layer.msg("登录成功！", { icon: 1 }, () => {
                    //                 //向主页面跳转
                    //                 location.href = './security/home/home.html';
                    //             });
                    //         }else{
                    //             layer.msg(result.message, { icon: 2 });
                    //         }

                    //     }).catch(error=>{

                    //     });

                    // ajax.post('/security/login', loginUser)
                    //     .then(response => {//正常响应
                    //         const result = response.data;

                    //         if (result.success) {
                    //             //登录成功

                    //             //获取令牌
                    //             const token = result.data;

                    //             //将令牌存放本地存储（localStorage）中 
                    //             localStorage.setItem("WD-TOKEN",token);

                    //             layer.msg("登录成功！", { icon: 1 }, () => {
                    //                 //向主页面跳转
                    //                 location.href = './security/home/home.html';
                    //             });
                    //         }else{
                    //             layer.msg(result.message, { icon: 2 });
                    //         }

                    //     })
                    //     .catch(error=>{

                    //     });
                };

                //axios.post('http://localhost:9999/security/login',loginUser);
                //axios.post('http://localhost/api/security/login',loginUser);


                return {
                    loginUser,
                    login
                };
            }
        };
        Vue.createApp(app).mount('#app');
    </script>


</body>

</html>